<template>
  <div
    class="flex flex-col bg-white border-r border-gray-200 transition-all duration-300 relative z-10 shadow-sm"
    :class="isCollapsed ? 'w-16' : 'w-52'"
  >
    <!-- Header -->
    <div
      class="h-16 flex items-center border-b border-gray-200 bg-gray-50 flex-shrink-0 px-4"
      :class="isCollapsed ? 'flex-col justify-center gap-0.5 px-1' : 'justify-between'"
    >
      <div class="flex items-center" :class="isCollapsed ? 'gap-0' : 'gap-2.5'">
        <i class="el-icon-cpu text-2xl text-primary-500 flex-shrink-0"></i>
        <span v-if="!isCollapsed" class="text-base font-medium text-gray-800 overflow-hidden text-ellipsis whitespace-nowrap">
          Go调试器
        </span>
      </div>
      <el-button
        type="text"
        :icon="isCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        class="text-gray-500 hover:text-gray-700 flex-shrink-0"
        :class="isCollapsed ? 'text-xs p-1' : 'text-lg p-2'"
        @click="toggleCollapse"
      ></el-button>
    </div>

    <!-- Menu -->
    <div class="flex-1 py-4 overflow-y-auto overflow-x-hidden">
      <div
        v-for="item in menuItems"
        :key="item.id"
        class="flex items-center px-5 py-3 cursor-pointer transition-all relative whitespace-nowrap gap-3 group"
        :class="[
          isCollapsed ? 'justify-center px-0' : '',
          activeView === item.id
            ? 'bg-primary-50 border-l-3 border-primary-500 text-primary-600'
            : item.disabled
              ? 'opacity-50 cursor-not-allowed'
              : 'hover:bg-gray-50 text-gray-700'
        ]"
        @click="handleMenuClick(item)"
        :title="item.name"
      >
        <i
          :class="[
            item.icon,
            'text-xl flex-shrink-0 w-5 text-center',
            activeView === item.id ? 'text-primary-500' : 'text-gray-500 group-hover:text-gray-700'
          ]"
        ></i>
        <span v-if="!isCollapsed" class="text-sm flex-1 overflow-hidden text-ellipsis">
          {{ item.name }}
        </span>
        <el-tag
          v-if="item.badge && !isCollapsed"
          type="info"
          size="mini"
          class="ml-auto text-xs px-1.5 h-4.5 leading-4.5"
        >
          {{ item.badge }}
        </el-tag>
      </div>
    </div>

    <!-- Footer -->
    <div class="border-t border-gray-200 py-2.5 flex-shrink-0">
      <div
        class="flex items-center px-5 py-2.5 gap-3 whitespace-nowrap text-gray-500 text-xs"
        :class="isCollapsed ? 'justify-center px-0' : ''"
        :title="'版本 v' + version"
      >
        <i class="el-icon-info text-sm"></i>
        <span v-if="!isCollapsed">v{{ version }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  props: {
    activeView: {
      type: String,
      default: 'debugger'
    }
  },
  data() {
    return {
      isCollapsed: false,
      version: '1.0.0',
      menuItems: [
        {
          id: 'debugger',
          name: '调试器',
          icon: 'el-icon-video-play',
          disabled: false
        },
        {
          id: 'settings',
          name: '设置',
          icon: 'el-icon-setting',
          disabled: false
        },
        {
          id: 'history',
          name: '调试历史',
          icon: 'el-icon-time',
          disabled: false
        },
        {
          id: 'docs',
          name: '使用文档',
          icon: 'el-icon-document',
          disabled: false
        }
      ]
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed
      this.$emit('collapse-change', this.isCollapsed)
    },

    handleMenuClick(item) {
      if (item.disabled) {
        this.$message.info(`${item.name}功能即将推出`)
        return
      }
      this.$emit('view-change', item.id)
    }
  }
}
</script>

<style scoped>
/* 响应式设计 */
@media (max-width: 1200px) {
  .el-button {
    display: none;
  }
}

/* 滚动条样式 */
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}
</style>
